<template>
  <van-popup position="right" :value="editShow">
    <van-nav-bar
      left-arrow
      title="编辑昵称"
      @click-right="rightClick"
      @click-left="$emit('update:editShow', false)"
    >
      <template #right>
        <div style="color:#f40;">
          提交
        </div>
      </template>
    </van-nav-bar>
    <!-- 表单验证v-->
    <van-form ref="form">
      <van-field v-model="inputValue" :rules="rules"></van-field>
    </van-form>
  </van-popup>
</template>
<script>
export default {
  name: 'Edit',
  props: ['editShow'],
  //   model: {
  //     prop: 'editShow',
  //     event: 'input'
  //   },
  data () {
    return {
      showEdit: false,
      inputValue: '',
      rules: [
        {
          required: true,
          message: '必填',
          trigger: 'onChange'
        },
        {
          validator: value => {
            // 不能和当前值（this.$store.state.userInfo.name）一样
            return value !== this.$store.state.user.userInfo.name
          },
          message: '不能和当前昵称重复',
          trigger: 'onChange'
        }
      ]
    }
  },
  methods: {
    rightClick () {
      this.$refs.form
        .validate()
        .then(() => {
          console.log('验证成功')
          //   this.$parent.editUserInfo({
          //     key: 'name',
          //     value: this.inputValue
          //   })
          this.$emit('editUserInfo', {
            key: 'name',
            value: this.inputValue
          })
          //   this.showEdit = false
          this.$emit('update:editShow', false)
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.van-popup {
  height: 100%;
  width: 100%;
}
::v-deep div.van-cell {
  padding: 10px 12px 0;
}
::v-deep .van-field__control {
  background-color: rgb(229, 229, 229);
  color: rgb(53, 53, 53);
}
</style>
